Flash MX deel 3/3 
Diashow van filmpjes 


Nadat we in deel 1 en 2 kennismaakten met de beginselen van 
interactie en animatie, doen we in het derde en laatste deel van 
de cursus een beroep op twee krachtige kenmerken van Flash 


MX: de mogelijkheid om externe Flash-films te laden, en het 


gebruik van componenten. 


Waarom is de mogelijkheid om externe 
Flash-films te laden dan zo nuttig? Je kan zo 
namelijk alleen die filmpjes laden die de be- 
zoeker van je Flash-site ook echt wil zien. 
Flash MX maakt het op die manier mogelijk 
de downloadgrootte van je bestand, en dus 
ook de wachttijd (en de frustratiefactor) voor 


De acht fotofilmpjes 


je site, aanzienlijk naar beneden te halen. 
Het tweede aspect van Flash MX dat hier 
aan bod komt, is het gebruik van zoge- 
naamde ‘componenten’. Met ‘componen- 
ten’ bedoelen we complexe constructies die 
op een eenvoudige manier in een afzon- 
derlijk werkpalet worden voorgesteld. De 


Op 


O8 je alle fotobestanden 
Ie In deze [es aan bod 
komen. 


webontwerper kan bepaalde afgewerkte con- 
structies uit het componentenpalet plukken 
en bespaart zich op die manier heel wat 
moeilijkheden. In het cursusvoorbeeld is 
de ‘component’ een klaargemaakt scroll- 
venster waarmee de webbezoeker doorheen 
de diashow kan navigeren. 


In het menu View kiezen we 


Document Properties 


Dimensions; |280px | (width) «  |4Mps _ | (heioh) 


[Contents | [ Default ] 


Match: Í Printer 


Background Color: el 
Framefate: |12 | fps 


Ruler Units: [ Pigels 


Wijzig de documentinstellingen. 


Vervolgens slepen we de 
eerste foto op de STAGE. Je 
kan de foto ook importe- 
ren via FILE — IMPORT TO L1- 
BRARY. Zodra de foto in de 
Library is opgenomen, 
kunnen we hem van daar 
op de STAGE slepen. 
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Eerst willen we met 
acht foto’s korte filmpjes 
samenstellen die de bezoe- 
ker desgewenst één voor één kan in- 
laden. 

Om te beginnen maken we een nieuw 
Flash MX-document (Fire — New). We 
klikken op de afmetingen in het pa- 
nel PROPERTIES; die staan standaard op 
550 bij 4oo pixels. In de DOCUMENT 
PROPERTIES bepalen we dat het een do- 
cument moet worden van 280 pixels 
breed en 470 pixels hoog met een 
zwarte achtergrond en een frame rate 
van 12 fps (frames per second). 
Plaats de eerste foto. 


À Scene 1 


Plaats de eerste foto. 


RULERS zodat boven en links 
de maataanduiding zichtbaar 
wordt. Uit deze linialen kunnen 
we hulplijnen slepen. We zetten 
de muisaanwijzer in de boven- 
ste liniaal, klikken en slepen 
naar beneden. Die lichtgroene 
hulplijnen blijven onzichtbaar 
in de uiteindelijke publicatie. Op 
dezelfde manier slepen we nog 
enkele hulplijnen uit de boven- 
en linkerliniaal zodat de foto net- 
jes omlijnd wordt door hulplij- 
nen. Die lijnen dienen om de 
volgende foto's op exact dezelfde plaats te positioneren. Het ver- 
dient de voorkeur om de foto’s vooraf in een grafisch programma 
naar de juiste proporties te schalen. Eventuele kleine wijzigingen 
kan je aanbrengen met het nieuwe Free Transform Tool (toets Q). 


Gebruik hulplijnen. 


Convert to Symbol 


Name: |Fotol_ 


Behavior: @) Movie Clip Registration: Be8 
OQ Button 


OQ Graphic 


Omzetten naar een symbool. 


Zoals we gezien hebben in het eerste deel, converteren we de foto tot 
een symbool. Klik op de foto en kies: INSERT - CONVERT to SYMBOL. 


E Fn 


| + Timeline _ 


El 


Het filmpje duurt 10/12de van een seconde. 


Vervolgens plaats je een nieuw keyframe op de tijdlijn bij frame 
Io: INSERT — KEYFRAME. 


|MovieClip se Instance of: Fotot 


mtr, 


we [2320 | w-f2an | 


B © ek 


He [3500 | y:l147 | 


Het beeld moet zachtjes oplichten. 


We klikken op het eerste frame en vervolgens op de foto die zich 
op de STAGE bevindt. In de PROPERTIES zetten we COLOR — BRIGHT- 
NESS op ‘—9o’. Hierdoor wordt de afbeelding op frame 1 zo donker 
dat de figuur nog nauwelijks waarneembaar is. We klikken ergens 
tussen frame 1 en frame 2 en commanderen in de PROPERTIES een 
TWEEN — Motion. Een pijltje geeft aan dat de TweeN gelukt is. 


_v Timeline 


BAO 5 5 20 25 30 35 40 45 50 55 60 65 


en 


[B] Actions for Frame 10 of Layer Name Layer 1 vl ml 


(EJ actions «ll [stop : Stop playing the movie 
(EJ Movie Contol ® a 
geta 
@ an 
@ piu 
@D stop 
@ stopAllsounds 
BrowseriNetwork 
Movie Clip Control 
Variables 
ConditionsiLoops 
Printing F0 


Line 1: stop); 


el, 


No Parameters, 


nn 


kl 


Te 


„150, 


Een Frame Action om de animatie te laten stoppen. 


Om te vermijden dat de dia onafgebroken aan en uit blijft knippe- 
ren, klikken we in de Timeline op het tiende frame en halen we de 
ACTIoNs erbij: WINDows — ACTIONS. Die ACTIONS worden gegroe- 
peerd in verschillende bibliotheken die voorgesteld worden als klei- 
ne boekjes. Bij Movie CONTROL vinden we de actie Stop. We dub- 
belklikken op die actie en merken dat op het actieve frame (num- 
mer ro) in de tijdlijn een kleine letter ‘a’ werd toegevoegd. Op die 
manier weten we dat er een FRAME ACTION staat bij frame ro. 

We bewaren dit bestand en publiceren het filmpje (Fire — PUBLISH) 
onder de naam: filmr.swf. Om fouten te vermijden, bewaren we 
alle bestanden in dezelfde directory. 


Vervolgens verwijde- 
ren we de foto uit de 
bibliotheek en impor- 
teren we de tweede 
foto. Dankzij de hulp- 
lijnen positioneren we 
die op dezelfde plaats 
en herhalen de vorige 
stappen. Hierdoor 
verkrijgen we acht ver- 
schillende korte film- 
pjes (swf-bestanden). 


Herhaal deze bewerkingen achtmaal. 


VOOR GEVORDERDEN Dl > D 


mi) Ma CI) 1 


120fps, 00s 4 


De acht miniaturen die dienen als knoppen. 


Voor de basis van de diashow maken we nu een nieuw docu- 
ment dat weer 280 pixels breed en 470 pixels hoog is, met een 
zwarte achtergrond. In het bijgeleverde downloadbestand zit- 
ten tevens acht kleine afbeeldingen die kunnen dienen als sym- 
bool (thumbnail) om die filmpjes die we zonet hebben gemaakt, 


op te roepen. De acht 
grotere bestanden zul- 
len later in de hoofd- 
film opgevraagd en ge- 
laden worden. We sle- 
pen de acht miniatu- 
ren op de STAGE, of im- 
porteren ze. 


Convert to Symbol 


Name: | Knop1 


Behavior: ) Movie Clip Registration: 998 


Doo 


@ Button 
O Graphic 


OK 


Advanced 


De thumbnails worden knoppen. 
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Lok) 
re 


Help 


EN 
LJ 


DOEN ETSZELEE 


6 4 


De ScrollPane-component 


Flash MX heeft verschillende nieuwe snufjes die het werk van de 
webdesigner gemakkelijker maken. Hier leren we de SCROLLPANE- 
component gebruiken om externe Flash-bestanden in te laden. 


Convert to Symbol 


Name: |Scraller 


Registration: 208 
ooo 


De acht knoppen worden omgezet naar een Movie Clip. 


Behavior: @) Movie Clip 
© Button 
O Graphic 


Terwijl ze nog steeds alle acht geselecteerd zijn, converteren we 
deze knoppen in één beweging tezamen tot één symbool (INSERT 
— CONVERT TO SYMBOL). Dat kan ook via de sneltoets F8. In het dia- 
loogvenster bepalen we dat dit symbool zich als Movie Cup moet 
gedragen. 

In het naamvenster verzinnen we een naam voor deze Movie Clip: 
‘Scroller’. Indien het SyMBOL-venster nog niet is uitgeklapt, klik- 
ken we op de knop ADVANCED om het venster met de opties te zien. 
Daar kiezen we voor EXPORT FOR ACTIONSCRIPT in het deel LINKAGE. 
Je merkt dat de naam van de Movie Cuip automatisch werd inge- 
vuld in het IDENTIFIER-veld. 


De knop Edit Symbols. 
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Indien de Movir Cure zich nog op de STAGE bevindt, 
kan je die selecteren en wissen. We hebben dit sym- 
bool alleen in de LiBRARY nodig en niet ‘on Stage’. 


Via de knop Eprr SymBors selecteren we opnieuw de Movie Crip 
die we daarnet ScroLrER hebben genoemd. In dit nieuwe venster 
kan je het gemaakte symbool verder bewerken. 


Er 


hes] Actions for [No instance name assigned] (Knop) 


@ stopallsounds loadMovie ; Load a movie clip from an URL 
3) BrowserlMetwork 
@® fscommand 
DB aeurL 
@ laadMovie — 
@D loadvariables 5 De 
@® unloadMovie 

Movie Clip Control 


® a 


[Expression 


URL: |fimtsuf 


EE 
Location: | Level 


vj. 
nies loadHovieNum{"filmi.suf", 1}; 


ConditionstLoops 


Printing 


User-Defined Functions 


Line 2: loadMovieNum(film1 „swf“, 1); 


Het Action Script dat het externe filmpje zal laden. 


We klikken op de eerste knop en vragen het venster ACTIONS 
(WiNpow — Actions). We kiezen uit de collectie BROWSER/NETWORK 
de actie: LoapMovie. Dubbelklik op die actie zodat er een nieuw 
rechtervenster tevoorschijn komt, waar je de parameters kan ingeven 
voor deze actie. In het url-vak typ je de naam van het filmpje dat 
geladen moet worden: ‘“filmr.swf. In het veld LOCATION LEVEL geef 
je in dat deze film in level 1 moet geladen worden. Level o is immers 
de achtergrond en level 1 wordt over o geladen. We drukken op 
ENTER. 


We doen hetzelfde voor de tweede knop: die laten we ‘filma.swf’ 
laden, opnieuw op level 1. Op die manier wijzen we de acht film- 
pjes toe aan de acht knoppen. Let erop dat je het basisbestand op 
dezelfde directory bewaart als de acht filmpjes die geladen moeten 
worden. 


<5 &ctions for [No instance name assigned] (Knop2) 


@ stopallsounds laadMovie : Load a movie clip from an URL 

3) BrowseriNetwork ® a 
@D fscommand URL: | film2.swf Expression 
BD geurt 
@D loadMovie - 
@D loadvariables Wariables: | Don't send 
@® unloadMovie | 

(B Movie Cip Conval It - SRO 


EJ) Wariables on (release) { 


2) condrionstLoops loadMovieNum("film2.swf", 1): 
Printing 
User-Defined Functions 


Location: | Level Eallk | 


v 


Line 2: loadMovieNumifilm2.swf", 1); 


De knoppen verwijzen telkens naar een volgend filmpje. 


É scene 1 &, 6, oor v 


(Flash UL Components E3 


EE] checker ComboBor 
El wisten @ Pushutten 


(@] rstioeuten B sorouear 


(B serourane 


De ScrollPane Component. 


Het AcTIoNs-venster mag weg en het symbool mag opgeborgen 
worden. We gaan terug naar de STAGE en vragen het panel Com- 
PONENTS: WINDOWS - COMPONENTS. We slepen de SCROLLPANE CoM- 
PONENT op de STAGE en plaatsen dit scroll-venster op de plaats waar 
we het hebben willen. 


Component Seroll Content Scroller 
‚> anne ams | || Herizontal Scrol! tue 
za it Vertical Scroll false 
Drag Content true 


© OO 


w:/2800 | #04 
pe [moo | vojone n 


Een scroll-venster op maat. 


Nu willen we de SCROLLPANE laten passen in onze film en daarom 
moeten we enkele parameters ingeven in de PROPERTIES van de 
component. 

Voor SCROLL CONTENT geven we de exacte naam in van de MOVIE 
Cup die moet geladen worden: hier is dat dus ‘Scroller’. 

We klikken op HORIZONTAL SCROLL en plaatsen dat op TRUE; VER- 
TICAL SCROLL zetten we op FALSE en DRAG CONTENT Op FALSE. 

Nu kan je de grootte van de SCROLLPANE aanpassen door de nu- 
merieke waarden in de PROPERTIES INSPECTOR te veranderen of je 
kan het FREE TRANSFORM Toor (Q) gebruiken. 

Hier merk je dat we deze scroll-clip roo pixels hoog hebben gezet 
en 280 pixels breed (de breedte van het filmpje). 

De diashow is klaar. Kijk maar in Fit — PUBLISH PREVIEW. Nog één 
detail dat het uiterlijk van de show verbetert maar dat niet direct 
van belang is om de aangehaalde techniek te begrijpen, en de kous 
is tot in de prefectie af. 


«(BEE ele ES 


Plaats een zwart vlak achter het symbool van de Scroller. 


Bij het symbool ScroLLEr hebben we een zwart vlak op een laag on- 

der onze thumbnails geplaatst. De normale achtergrond van een 
SCROLLPANE is wit en op die manier verkrijgen we een zwarte ach- 
tergrond. 

Wanneer we een grafisch É sai e,‚ 4, 2 v 
element in het basisdocu- 
ment toevoegen op de 
plaats waar straks de dia’s 
worden geladen, zal er in 
het begin geen doods zwart 
vlak worden getoond. Dat 
element bevindt zich dus 
op level o waarover straks 
de filmpjes (op level 1) zul- 
len verschijnen. 


Conclusie 


Zo, hiermee eindigt deze 
beknopte introductie tot het 
webbouwerspakket Flash 
MX. Je hebt nu de moge- 
lijkheid om een flitsende 
site te maken met anima- 
ties, navigatietechnieken, 
multimedia-elementen of 
spelletjes. 

— Dirk Schoofs — 


Dit is level 1. 


VOLGENDE KEER 
IN DE RUBRIEK: 


Hoe zoek je snel gegevens in Excel? 
Shockwave installeren op je pc 
Werken met kop- en voetteksten 

in Word 


Hoe creëer je je eigen Acrobat Reader 
pdf-bestanden? 

Hoe maak je een database in Access? 
En nog veel meer om je stevig in vast 
te bijten! 


